// @ts-ignore
import styled from "styled-components";
type propsType={
  $size?:number,
  $color?:string,
  $isShowLine?:boolean,
  $backgroundColor?:string,
  $isLeft?:boolean,
};
const UnitBoxStyle=styled.div<propsType>`
  position: relative;
  width: 100%;
  overflow: hidden;
  background: ${(props:propsType)=>props.$backgroundColor?props.$backgroundColor:"transparent"};
  .unit-box-title-box{
    position: relative;
    //display: flex;
    justify-content: center;
    text-align: center;
    font-size: ${(props:propsType)=>props.$size?`${props.$size}px`:"36px"};;
    //font-family: 宋体;
    letter-spacing: 4px;
    width: 100%;
    margin: 60px 0 20px;
    font-weight: bolder;
  }
  .unit-box-title{
    margin: 0 ${(props:propsType)=>props.$size?`calc(${props.$size}px / 1.2)`:"1.2px"};;
    color: ${(props:propsType)=>props.$color?props.$color:"#000000"};
    white-space: nowrap;
    padding: 0 20px;
    text-align: ${(props:propsType)=>props.$isLeft?"left":"center"};
  }
  .unit-box-line{
    display: ${(props:propsType)=>props.$isShowLine?"block":"none"};
    position: absolute;
    top: 50%;
    height: 2px;
    width: 35%;
    background: var(--theme-color);
  }
  .left-line{
    left: 0;
  }
  .right-line{
    right: 0;
  }
  .unit-box-navbar-ul{
    display: flex;
    width: fit-content;
    padding: 20px;
    margin: 10px auto;
  }
  
  .unit-box-navbar-li{
    padding: 5px 8px;
    margin: 0 20px;
    font-size: 17px;
    cursor: pointer;
  }
  .unit-box-navbar-li:hover{
    color: var(--theme-color);
  }
  .unit-box-content {
    position: relative;
  }
`;
export default UnitBoxStyle;
